<template>
    <a-sub-menu v-if="hasChildren" :key="item.id" :title="item.name">
        <template #icon>
            <svg-icon :file-name="item.icon" :size="14" />
        </template>
        <menu-item v-for="child in item.children" :key="child.id" :item="child" />
    </a-sub-menu>
    <a-menu-item v-else-if="item.type === 2" :key="item.url">
        <template #icon>
            <svg-icon :file-name="item.icon" :size="14" />
        </template>
        {{ item.name }}
    </a-menu-item>
</template>
<script setup>
import { computed } from 'vue'
import { SvgIcon } from '@iframe/tools/components'
const props = defineProps({
    item: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const hasChildren = computed(() => {
    return props.item.children && props.item.children.length > 0
})
</script>
